<template>
  <detailbox :title="type == 1 ? '重新编辑' : '新增'" @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div v-if="type == 1" class="error error_f f12 ml10 flex_start">
        <i class="f14 el-icon-error"></i>
        审核未通过: <span class="ml30">{{ checkItem.type==1?'审核人:':checkItem.type==3?'记录责任人:':checkItem.type==4?'批准人:':'' }}  {{checkItem.createUserName}}</span> <span class="ml30">未通过原因: {{checkItem.content}}</span>
      </div>
      <div v-else></div>
      <div class="flex_end">
        <el-button type="success" size="small" @click="addFile" v-if="type != 1">添加新增</el-button>
        <el-button v-if="type == 1" type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
        <el-button type="primary" size="small" @click="submit">提交</el-button>
      </div>
    </div>
    <el-row>
      <el-col :span="18">
        <div style="margin-top:10px;" v-for="(form, index) in formList" :key="index" :id="'item'+index">
          <basic-container>
            <div class="main_title success_f flex_between">
              <b>
                管理信息
                <span v-if="formList.length > 1">({{ index + 1 }})</span>
              </b>
              <el-button type="danger" size="small" plain v-if="index != 0" @click="delFile(index)">删除</el-button>
            </div>
            <el-divider></el-divider>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">基础信息</b>
            </div>
            <div>
              <el-form size="small" model="form" label-position="left">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="岗位培训管理编号:" required>
                      <el-input v-model="form.number" placeholder="数据带入" class="w160 ml10" readonly v-if="form.numberType == 0"></el-input>
                      <el-input class="ml10 w160" placeholder="请输入" v-model="form.number" v-if="form.numberType == 1"></el-input>
                      <el-popover placement="top-start" title="编号规则:" width="220" trigger="hover">
                        <div>
                          <p>GWPX--------岗位培训</p>
                          <p>xxxx---------年月日(编辑日期，8位)</p>
                          <p>xx---------流水号,从01开始</p>
                        </div>
                        <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>

                <div class="f14 mb20">
                  岗位培训信息
                  <el-button size="mini" class="el-icon-circle-plus-outline ml10" type="primary" plain @click="addItem(form)">增加</el-button>
                </div>
                <div class="reviewCon mb20" v-for="(item, i) in form.trainList" :key="i">
                  <el-row class="reviewList">
                    <el-col :span="8">
                      <el-form-item label="培训岗位:" required>
                        <el-select v-model="item.postId" class="w160" filterable placeholder="请输入/搜索" @change="changePostName($event, item)">
                          <el-option v-for="v in gangweiList" :key="v.id" :label="v.postName" :value="v.id"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="14">
                      <el-form-item label="岗位人员:" required>
                        <el-select v-model="item.renyuanList" multiple filterable placeholder="请输入/搜索" style="width:80%;">
                          <el-option v-for="v in mainDataList" :key="v.id" :label="v.name" :value="v.name"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="培训方式:" required>
                        <el-select class="w160" placeholder="请选择" v-model="item.trainWay" filterable>
                          <el-option :value="0" label="线上"></el-option>
                          <el-option :value="1" label="线下"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="考核结果:" required>
                        <el-select class="w160" placeholder="请选择" v-model="item.assessmentResults" filterable>
                          <el-option :value="0" label="合格"></el-option>
                          <el-option :value="1" label="不合格"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="培训类别:" required>
                        <el-select class="w160" placeholder="请选择" v-model="item.trainType" filterable>
                          <el-option :value="0" label="理论"></el-option>
                          <el-option :value="1" label="实操"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="培训日期:" required class="m0">
                        <el-date-picker class="w160" value-format="yyyy-MM-dd" v-model="item.trainDate" type="date" placeholder="选择日期"></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <i class="error_f el-icon-delete pointer f20 delete" @click="delItem(form, i)" v-if="i != 0"></i>
                  </el-row>
                </div>

                <el-row class="flex_warp">
                  <el-col :span="6">
                    <el-form-item label="管理部门:" required>
                      <el-cascader
                        class="w160"
                        placeholder="请选择"
                        ref="newdept"
                        :options="deptOption"
                        v-model="form.manageDeptId"
                        :show-all-levels="false"
                        :props="{
                          value: 'id',
                          label: 'deptName',
                          emitPath: false,
                          checkStrictly: true
                        }"
                        filterable
                        @change="getMemberOption($event, index)"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="负责人:" required>
                      <el-select class="w160" placeholder="请选择" v-model="form.manageUserId" filterable @change="selectChange($event, form)">
                        <el-option v-for="(item, i) in form.memberOption" :key="i" :value="item.id" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="编制部门:"><el-input class="w160" v-model="userInfo.deptName" placeholder="数据带入" readonly></el-input></el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div style="margin-bottom: 10px;"><creat-file :form="form"></creat-file></div>
          </basic-container>
        </div>
      </el-col>
      <el-col :span="6" style="margin-top:10px;"><creat-flow ref="creatFlow" :formList="formList"></creat-flow></el-col>
    </el-row>
    <steps ref="steps" @close="success()" :nowdate="nowdate"></steps>
    <confirm
      ref="confirm"
      @close="save()"
      type="1"
      :guifanFilesProcessRecordList="guifanFilesProcessRecordList"
      :systemGuifanFilesProcessList="systemGuifanFilesProcessList"
    ></confirm>
    <showhistory ref="showhistory" type="1" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
  </detailbox>
</template>

<script>
// const moment = require('moment');
import confirm from './confirm.vue';
import { getrenyuanList } from '@/api/myapi/common';
import { savefiles, getguifanDetail, update, getguifanList } from '@/api/myapi/tixiwenjian';
export default {
  props: {
    detailId: '',
    type: {
      type: [Number, String],
      default: 0
    }
  },
  components: {
    confirm
  },
  data() {
    return {
      system: 'trainprocess',
      mainDataList:[],
      formList: [
        {
			numberType: 0,
          memberOption: [],
          jiluFileList: [],
          guifanFileList: [],
          trainList: [{}]
        }
      ],
      guifanFilesProcessRecordList: [],
      systemGuifanFilesProcessList: []
    };
  },
  created() {
    if (this.detailId) {
      this.getDetail();
    } else {
      this.findTypeByProcessType();
    }
    this.getdeptlist();
    this.getGangweiList();
    this.getDataList();
  },
  methods: {
    addItem(form) {
      if(! form.trainList) this.$set(form,'trainList',[]);
      form.trainList.push({});
    },
    delItem(form, i) {
      form.trainList.splice(i, 1);
    },
    getDetail() {
      getguifanDetail(
        {
          id: this.detailId
        },
        this.system
      ).then(({ data }) => {
        console.log(data);
        if (data.success) {
          if (this.type == 2) {
            delete data.data.id;
            data.data.number = '';
            data.data.numberType = 0;
            this.findTypeByProcessType();
          }
          this.formList = [data.data];
          this.formList.forEach(item => {
            item.trainList.forEach(el=>{
              el.renyuanList=el.renyuan.split(',');
            })
            this.getuserByDept(item.manageDeptId, item);
          });
          this.guifanFilesProcessRecordList = data.data.processRecordList;
          this.checkItem = this.guifanFilesProcessRecordList.find(item=>item.checkStatus==2);
		  this.$nextTick(() => {
            this.$refs.creatFlow.setProcessRecord(this.guifanFilesProcessRecordList);
          });
        }
      });
    },
    //   人员信息
    getDataList() {
      getrenyuanList(
        {
          current: 1,
          size: 10000
        }
      ).then(({ data }) => {
        if (data && data.success) {
          this.mainDataList = data.data.records;
        }
        //
      });
    },
    //   岗位
    changePostName(id, form) {
      let postItem = this.gangweiList.find(item => item.id == id);
      form.postName = postItem.postName;
    },
    close() {
      this.$emit('close');
    },
    getnewdept(val, index) {
      let dept = this.$refs.newdeptd[index].getCheckedNodes();
      this.formList[index].deptName = dept[0].label;
      // this.formList[index].manageDeptId = dept[0].value;
    },
    getMemberOption(val, index) {
      let dept = this.$refs.newdept[index].getCheckedNodes();
      this.formList[index].manageDeptName = dept[0].label;
      this.formList[index].manageDeptId = dept[0].value;
      this.formList[index].manageUserId = '';
      this.formList[index].manageUserName = '';
      this.getuserByDept(val, this.formList[index]);
    },
    submit() {
      let systemGuifanFilesProcessList = [];
      let guifanFilesProcessRecordList = this.$refs.creatFlow.guifanFilesProcessRecordList;
      let isOnlineReview = this.$refs.creatFlow.isOnlineReview;
      for (let i = 0; i <= guifanFilesProcessRecordList.length - 1; i++) {
        let item = guifanFilesProcessRecordList[i];
		item.sort=i;
        if (item.type == 1 && !item.userId) {
          this.$message.error('请选择审核人员');
          return;
        }
        if (item.type == 4 && !item.userId) {
          this.$message.error('请选择批准人员');
          return;
        }
        if (isOnlineReview && item.type == 3 && !item.userId) {
          this.$message.error('请选择记录责任人');
          return;
        }
      }
      for (let i = 0; i < this.formList.length; i++) {
        let item = this.formList[i];
        item.trainList[i].renyuan =  item.trainList[i].renyuanList.join(',');
        let arr = [
          {
            value: item.number,
            tips: '请补充培训岗位管理编号'
          },
          // {
          //   value: item.postId,
          //   tips: '请选择培训岗位'
          // },
          // {
          //   value: item.trainDate,
          //   tips: '请选择培训时间'
          // },

          {
            value: item.manageDeptId,
            tips: '请选择管理部门'
          },
          {
            value: item.manageUserId,
            tips: '请选择负责人'
          },
          {
            value: item.jiluFilesIds,
            tips: '请添加记录文件'
          },
          {
            value: item.retentionPeriod,
            tips: '请输入记录保留期限'
          },
          {
            value: item.retentionPeriod < 2 ? false : true,
            tips: '记录保留期限应≥2年'
          }
        ];
        for (let j = 0; j < arr.length; j++) {
          if (!arr[j].value) {
            this.$message.error(arr[j].tips);
            return;
          }
        }
        item.createDeptName = this.userInfo.deptName;
        item.createUserName = this.userInfo.user_name;
        item.createUserId = this.userInfo.user_id;
        item.createDeptId = this.userInfo.dept_id;
        systemGuifanFilesProcessList.push({
          ...item,
          processRecordList: guifanFilesProcessRecordList
        });
      }
      this.systemGuifanFilesProcessList = systemGuifanFilesProcessList;
      this.guifanFilesProcessRecordList = guifanFilesProcessRecordList;
      console.log(this.systemGuifanFilesProcessList);
      console.log(this.guifanFilesProcessRecordList);
      this.openDialg('confirm');
    },
    // 保存
    save() {
      if (this.type == 1) {
        update(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功');
            this.nowdate = this.dateFormat(new Date());
            this.openDialg('steps');
          }
        });
      } else {
        savefiles(this.systemGuifanFilesProcessList, this.system).then(({ data }) => {
          if (data.success) {
            this.$message.success('提交成功');
            this.nowdate = this.dateFormat(new Date());
            this.openDialg('steps');
          }
        });
      }
    },
    success() {
      this.$emit('success');
    },
    // 发放的文件
    addFile() {
      this.formList.push({
        numberType: this.numberType,
        number: this.numberType == 0 ? this.findTypeByProcessType(this.liushuihao) : '',
        jiluFileList: [],
        guifanFileList: []
      });
	  let index=this.formList.length-1;
	  setTimeout(()=>{
	  	let document=window.parent.document.getElementById(`item${index}`);
	  	document.scrollIntoView({behavior:'smooth'});
	  },100)
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.delete {
  position: absolute;
  top: 20px;
  right: 20px;
}
.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

div::deep .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.fileBox {
  position: relative;
  padding: 20px 10px 1px;
  border: 1px dashed #e4e8ed;

  .del {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}

.worktable {
  td,
  th {
    line-height: 28px;
  }
}

.steps {
  .f16 {
    margin-left: 6px;
  }

  .flex_center {
    margin-bottom: 7px;
  }
}

.btnbox {
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px 0px 0px 3px;
}

.btnleft {
  padding: 0 10px;
}

.btnright {
  border-left: 1px solid #a3cffd;
  padding: 0 10px;
  line-height: 32px;
}

.border {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 32px;
  padding: 0 10px;
}

.preview {
  padding: 10px;
  background-color: #f0f2f5;
  margin-top: 20px;
  margin-left: 10px;
}

.preview .warn_f {
  background-color: #fbf4e0;
  border: 1px solid #f3dea4;
  line-height: 20px;
  padding: 0 4px;
  margin: 20px 0 10px;
}

.preview .tem {
  width: 377px;
  height: 512px;
}

.preview.bigpreview {
  background-color: #ffffff;
}

.preview.bigpreview .tem {
  width: 510px;
  height: 693px;
}

.error {
  background-color: #fceeec;
  border: 1px solid #f9dcd9;
  padding: 6px 10px;
  border-radius: 2px;
}

div::deep .el-checkbox.is-bordered {
  height: 32px;
  padding: 5px 10px;
}

.jobfile {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.jobLeft {
  width: 34%;
}

.leftTitle {
  height: 48px;
  background: #f5f7fa;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 48px;
  border-radius: 0px;
  padding: 0 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #303133;
  opacity: 1;
}

.leftList {
  height: 98px;
  background: #ffffff;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 95px;
  border-radius: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
}

.cenList {
  height: 48px;
  background: #ffffff;
  border: 1px solid #ebf0f5;
  opacity: 1;
  line-height: 48px;
  padding: 0 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 0px;
}

.fileBtn {
  margin-left: auto;
  margin-right: 10px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #909499;
  opacity: 1;
}

.leftBtn {
  margin-left: auto;
  margin-right: 10px;
}

.leftText {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 16px;
  color: #606366;
  opacity: 1;
}

.reviewTitle {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 0px;
  color: #606366;
  opacity: 1;
  margin-top: 30px;
}

.addReview {
  width: 74px;
  height: 32px;
  margin: 0 20px;
  background: #e6f1fc;
  border: 1px solid #a3cffd;
  opacity: 1;
  border-radius: 3px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 14px;
  color: #126bc9;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reviewText {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #909499;
  opacity: 1;
}

.reviewList {
  background: #ffffff;
  border: 1px dashed #e4e8ed;
  opacity: 1;
  border-radius: 0px;
  padding: 15px;
  position: relative;
}
</style>
